<template>
    <div class="HumiditySection">
        <!-- 2{{ isTimerActiveInject }} -->
        <div class="ChartContainer" ref="humidityChart"></div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { ref, onMounted, onUnmounted, inject } from 'vue';
// import { getNowData } from '@/api/Environment/index.js';

const humidityChart = ref(null);
const humData = ref([]);
const lastData = ref(null); // 用于存储最后一条数据
const timer = ref(null);
const isTimerActiveInject = inject('isTimerActive');

onMounted(async () => {
    await fetchDataAndUpdateChart();
    if (!isTimerActiveInject) {
        timer.value = setInterval(fetchDataAndUpdateChart, 3000);
    } else {
        clearInterval(timer.value);
    }
});

onUnmounted(() => {
    if (timer.value) {
        clearInterval(timer.value);
    }
});

function fetchDataAndUpdateChart() {
    // 生成一个随机的时间戳和湿度值
    const currentTime = new Date().getTime();
    let fakeHumidity = Math.floor(Math.random() * 60) + 20; // 假设湿度在20到80之间

    // 确保湿度值在38到44之间
    fakeHumidity = Math.max(38, Math.min(44, fakeHumidity));

    // 创建一个新数据对象
    const newData = {
        time: currentTime,
        value: fakeHumidity
    };

    // 检查是否有新数据或者数据时间戳改变了
    if (!lastData.value || lastData.value.time !== newData.time) {
        humData.value.push(newData);
        if (humData.value.length > 7) {
            humData.value.shift(); // 移除最旧的数据
        }
        lastData.value = newData; // 更新最后一条数据
        initChart();
    }
}


// async function fetchDataAndUpdateChart() {
//     const res = await getNowData('');
//     if (res.code == 201) {
//         const newData = res.data.hum[0];
//         if (!lastData.value || lastData.value.time !== newData.time) {
//             // 如果有新数据或者数据时间戳改变了，更新图表
//             humData.value.push(newData);
//             if (humData.value.length > 7) {
//                 humData.value.shift(); // 移除最旧的数据
//             }
//             lastData.value = newData; // 更新最后一条数据
//             initChart();
//         } else {
//             // 如果没有新数据，清除定时器
//             clearInterval(timer.value);
//             timer.value = null;
//         }
//     }
// }
function initChart() {
    if (!humidityChart.value) return;

    const myChart = echarts.init(humidityChart.value);
    const option = {
        title: {
            text: '湿度实时显示',
            left: 'left'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                // 格式化提示框显示的内容
                params = params[0];
                const date = new Date(params.name);
                return date.toLocaleTimeString() + '<br/>' + params.value + '%';
            }
        },
        xAxis: {
            type: 'category',
            data: humData.value.map(item => {
                const date = new Date(item.time);
                return date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
            }),
            axisLabel: {
                color: '#333'
            }
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#333'
            }
        },
        series: [
            {
                name: '湿度',
                type: 'bar', // 使用柱状图
                barWidth: '20%', // 调整柱状图的宽度
                data: humData.value.map(item => item.value), // 使用humData中的value属性作为Y轴数据
                itemStyle: {
                    color: '#409EFF'
                }
            }
        ]
    };
    myChart.setOption(option);
}

</script>



<style lang="scss" scoped>
.HumiditySection {
    width: 100%; // 可以根据实际需要调整宽度
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;

    .ChartContainer {
        width: 100%;
        height: 300px;
        background-color: white;
    }
}
</style>
